<template>
	<view class="zone">
		<view class="status_bar"><!-- 这里是状态栏 --></view>
		<view class="main">
			<view class="topbox">
				<image class="title" src="http://img.cpgm.cc/panda/static/game/title.png" mode="widthFix" />
				<image class="bg" src="http://img.cpgm.cc/panda/static/active/bg.jpg" mode="widthFix" />
				<image class="posa1 zwyFly" src="http://img.cpgm.cc/panda/static/active/card1.png" mode="heightFix" />
				<image class="posa2 zwyFly2" src="http://img.cpgm.cc/panda/static/active/card2.png" mode="heightFix" />
				<image class="posa3 zwyFly" src="http://img.cpgm.cc/panda/static/active/card3.png" mode="heightFix" />
				<image class="posa4 zwyFly2" src="http://img.cpgm.cc/panda/static/active/card4.png" mode="heightFix" />
				<image class="posa5 zwyFly" src="http://img.cpgm.cc/panda/static/active/card5.png" mode="heightFix" />
				<image class="posa" src="http://img.cpgm.cc/panda/static/active/top.png" mode="widthFix" />
				<image class="wa" @click="$p.navto('/pages/forest/forest')" src="http://img.cpgm.cc/panda/static/fuben/wa.gif" mode="widthFix" />
			</view>
			<view class="bottom">
				<image class="song" src="http://img.cpgm.cc/panda/static/game/song.png" mode="widthFix" />
				<view class="button buy" @click="show = true">
					<text>立即交换</text>
					<p>
						<image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
						<text>21银元/张</text>
					</p>
					<image @click.stop="ddd" class="exchangeimg" src="http://img.cpgm.cc/panda/static/active/exchange.png" mode="heightFix" />
				</view>

				<view class="listbox">
					<p>潮玩水晶应用</p>
					<view class="list">
						<view class="item" v-for="(item , index) in list" :key="index" @click="navtopath(item)">
							<image v-if="item.type == 1" class="posaimg zwyJittery1" src="../../static/public/new2.png" mode="widthFix" />
							<image :src="`http://img.cpgm.cc/panda/static/active/${item.image}`" mode="widthFix" />
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>

				<view class="listbox">
					<view class="flbw">
						<p>熊猫潮卡应用</p>
						<view class="card">
							<image src="http://img.cpgm.cc/panda/static/forest/panda.png" mode="widthFix" />
							<text>熊猫潮卡: {{userinfo.cards}}张</text>
						</view>
					</view>
					
					<view class="list">
						<view class="item" v-for="(item , index) in list2" :key="index" @click="$u.toast('即将正式上线')">
							<image :src="`http://img.cpgm.cc/panda/static/active/${item.image}`" mode="widthFix" />
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		
		<u-mask :show ="show">
			<view class="playbox" :class="[show?'playboxac':'']">
				<image class="closed" @click="show = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
				<view class="content">
					<image class="yb" src="http://img.cpgm.cc/panda/static/mask/card.png" mode="widthFix" />
					<h3>熊猫潮卡</h3>
					<view class="numbox">
						<text>交换数量</text>
						<view class="flex1">
							<u-number-box v-model="value" :min="1" :max="max" @change="valChange()" ></u-number-box>
						</view>
					</view>

					<!-- <view class="have have2">预计每天可挖出 <image src="http://img.cpgm.cc/panda/static/self/shuj.png" mode="widthFix" />  0.833333颗水晶</view> -->

					<view class="button" @click="show3 = true">
						<text>立即兑换</text>
						<p>
							<image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
							21银元/张
						</p>
					</view>
					<view class="have">
						拥有 <image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />  {{userinfo.silver}}颗银元
					</view>
				</view>
			</view>
		</u-mask>


		<u-mask :show="show3">
			<view class="warp">
				<view class="maskbox">
					<image class="topimg" src="http://img.cpgm.cc/panda/static/self/card2.png" mode="widthFix" />
					<view class="wightbg">
						<p>确定使用{{buynum}}银元交换{{value}}熊猫潮卡？</p>
						<view class="mask_btn button"  @click="buyCard()">确定</view>
					</view>
					<p class="cancel" @click="show3 = false">取消</p>
				</view>
			</view>
		</u-mask>


		<u-mask :show="show2">
			<view class="warp">
				<view class="mask_explain">
					<h3>交换说明</h3>
					<view class="e_content">
						<p>1.熊猫潮卡为定制及盲盒类商品，根据《消费者权益保护法》规定，因产品售出后，无法按照售卖规则二次销售，不适用7天无理由退换的规定，请理性交换。</p>
						<p>2.对应的实物潮卡需拣货配送，若发货时同用户存在多个相同地址订单可能会合并发货，一般下单后60个工作日内可发货完成，在此期间可享受限时运费减免活动。</p>
						<p>3.参与运费减免活动的订单不支持修改地址，如必须修改，产生的额外运费由用户自行承担，敬请谅解。</p>
					</view>
				</view>
				<image class="e_closed" @click="show2 = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
			</view>
		</u-mask>

		<u-mask :show="getcard">
			<view class="warp">
				<view class="maskbox2">
					<image class="topimg" src="http://img.cpgm.cc/panda/static/mask/laba.png" mode="widthFix" />
					<view class="wightbg">
						<p>恭喜您成功获得</p>
						<image src="http://img.cpgm.cc/panda/static/self/card2.png" mode="widthFix" />
						<text>{{num}}张潮玩卡</text>
					</view>
				</view>
				<view class="mask_btn button" @click="getcard = false">开心收下</view>
			</view>
		</u-mask>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: uni.getStorageSync('userinfo'),
				list:[
					{
						id:1,
						name:'夺宝熊兵',
						image:'1.png',
						path:'/pages/duoBao/baoIndex',
						type:1,
					},
					{
						id:2,
						name:'兑换水晶',
						image:'2.png',
						path:'/pages/index/exchange',
						type:1,
					},
					{
						id:3,
						name:'大玩家',
						image:'3.png',
						path:'/pages/index/goldword',
						type:1,
					},
					{
						id:4,
						name:'大逃杀',
						image:'4.png',
						path:'/pages/home/wolfkill',
						type:1,
					},
					{
						id:5,
						name:'水晶靓号',
						image:'5.png',
						path:'/pages/forest/number',
						type:2,
					},
					{
						id:6,
						name:'御风童子',
						image:'6.png',
						path:'/pages/game/flyboy',
						type:2,
					},
					{
						id:7,
						name:'喂神兽',
						image:'7.png',
						path:'/pages/home/feed',
						type:1,
					},
					{
						id:8,
						name:'潮玩宝箱',
						image:'8.png',
						path:'/pages/invitebox/inviteindex',
						type:1,
					},
					{
						id:9,
						name:'镇妖塔',
						image:'9.png',
						path:'/pages/forest/tower',
						type:1,
					},
					{
						id:10,
						name:'攒幸运值',
						image:'10.png',
						path:'/pages/invitebox/lucky',
						type:2,
					},
					{
						id:11,
						name:'扭蛋熊猫',
						image:'11.png',
						path:'/pages/forest/applet',
						type:2,
					},
				],
				list2:[
					{
						id:1,
						name:'熊猫森林',
						image:'12.png',
						path:''
					},
					{
						id:2,
						name:'收集领奖',
						image:'13.png',
						path:''
					},
					{
						id:3,
						name:'保险箱',
						image:'14.png',
						path:''
					},
					{
						id:4,
						name:'打擂台',
						image:'15.png',
						path:''
					},
					{
						id:5,
						name:'兑熊猫币',
						image:'16.png',
						path:''
					},
					{
						id:6,
						name:'炸外星人',
						image:'17.png',
						path:''
					},
					{
						id:7,
						name:'百万熊票',
						image:'18.png',
						path:''
					},
				],
				show:false,
				max:100,
				value:1,
				show2:false,
				buynum:21,
				show3:false,
				getcard:false,
				num:'',
			};
		},
		onShow(){
			this.getUserInfo();
		},
		methods: {
			// 获取个人信息
			getUserInfo(){
				this.$getUserInfo.getUserInfo((res)=>{
					if(res.code == 1) {
						this.userinfo = res.data;
						this.max = Math.trunc(Number(res.data.silver) / 21) 
					}
				})
			},	

			ddd(){
				this.show2 = true
			},

			valChange(e){
				this.buynum = this.value * 21
			},


			navtopath(item){
				// if(item.id == 6) {
				// 	this.$u.toast('即将正式上线');
				// }else {
					this.$p.navto(item.path)
				// }
			},

			// 交换潮玩卡
			async buyCard(){
				let res = await this.$http.index.buyCard({
					num:this.value
				})
				if(res.code == 1) {
					this.getUserInfo();
					this.show = false
					this.show3 = false
					this.num = this.value
					this.getcard = true
				}else {
					this.$u.toast(res.msg)
				}
			},
		}
	}
</script>

<style lang="less">

	.zone {
		background: #23262C;
		background-size: 101% 101%;
		background-position: center;
		// #ifdef APP-PLUS
		min-height: 100vh;
		// #endif
		// #ifdef H5
		min-height: calc(100vh - 75px);
		// #endif
	}

	.main {

	}

	.topbox {
		width: 100%;
		line-height: 0;
		position: relative;
		margin-top: -10%;

		.bg {
			width: 100%;
		}

		.title {
			width: 80%;
			position: absolute;
			top: 4%;
			left: 10%;
			z-index: 99;
		}
	}

	
.posa1 {
	position: absolute;
    bottom: 30%;
    z-index: 9;
    left: 14%;
    height: 31%;
}

.posa2 {
	position: absolute;
    bottom: 30%;
    z-index: 8;
    left: 20%;
    height: 37%;
}
.posa3 {
	    position: absolute;
    bottom: 30%;
    z-index: 7;
    left: 30%;
    height: 43%;
}
.posa4 {
	position: absolute;
	bottom: 30%;
	z-index: 6;
	left: 45%;
	height: 37%;
}
.posa5 {
	position: absolute;
	bottom: 30%;
	z-index: 5;
	left: 56%;
	height: 33%;
}

.posa {
	position: absolute;
	z-index: 20;
	width: 90%;
	left: 5%;
	bottom: 18%;
}




.zwyFly {
	animation: zwyFly 4s infinite linear !important;
}

@keyframes zwyFly {
	0% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
	25% {
		-webkit-transform: translateY(-10px);
		transform: translateY(-10px);
	}
	50% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
	75% {
		-webkit-transform: translateY(10px);
		transform: translateY(10px);
	}
	100% {
		-webkit-transform: translate(0);
		transform: translate(0);
	}
}

.zwyFly2 {
	    animation: zwyFly 4s 2s infinite linear;
}

.bottom {
	background: linear-gradient(90deg, #1B1C1E 0%, #23262C 100%);
	box-shadow: inset 0px 5px 0px 0px rgba(74,77,86,1);
	border-radius: 10px 10px 0 0;
	padding: 12px;
	margin-top: -30%;
	position: relative;
}

.buy {
	background: url('http://img.cpgm.cc/panda/static/public/btn6.png');
	background-size: 100% 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 10px;
	position: relative;

	text {
		color: #B73800;
		font-size: 20px;
		font-weight: 600;
	}

	p {
		display: flex;
		align-items: center;
		margin-top: 5px;

		image {
			width: 20px;
		}
		text {
			color: #B73800;
			font-size: 12px;
		}
	}

	.exchangeimg {
		height: 65px;
		position: absolute;
		left: 15px;
		top: 50%;
		transform: translateY(-50%);
	}
}

.listbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	border-radius: 9px;
	padding: 12px;
	margin-top: 16px;

	.flbw {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	p {
		color: #1D1E24;
		font-size: 15px;
		font-weight: 600;
	}

	.card {
		background: #FFFFFF;
		border-radius: 4px;
		padding: 4px 5px;
		width: fit-content;
		display: flex;
		align-items: center;

		image {
			width: 20px;
			margin-right: 2px;
		}
		text {
			font-size: 12px;
			font-weight: 600;
		}
	}

	.list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 12px;
	}

	.item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 10px 0;
		position: relative;


		.posaimg {
			position: absolute;
			width: 30px;
			z-index: 9;
			right: 10%;
		}

		image  {
			width: 55%;
		}
		text {
			color: #1D1E24;
			font-size: 12px;
		}
	}
}


// 交换弹窗
.playbox {
	width: 100%;
	position: absolute;
	left: 0%;
	bottom: -50vh;
	background: url('http://img.cpgm.cc/panda/static/mask/bbg.png');
	background-size: 100% 100%;
	transition: all 0.3s linear;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;

		.yb {
			width: 50%;
			margin-top: -28%;
		}

		h3 {
			position: relative;
			color: #000000;
			font-size: 20px;
			width: 50%;
			text-align: center;
			z-index: 2;
			margin-top: 20px;
		}

		.explain {
			color: #333333;
			font-size: 14px;
			margin: 10px 0;
			text {
				font-weight: 600;
			}
		}

		h3::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.piece {
			width: 100%;
			background: #FFFFFF;
			border-radius: 9px;
			padding: 15px;
			display: flex;
			align-items: center;
			margin: 5px 0;

			text {
				color: #1D1E24;
				font-size: 14px;
				font-weight: 600;
				margin-right: 10px;
			}

			input {
				text-align: center;
				flex: 0.9;
			}
		}

		.button {
			height: 68px;
			width: 100%;
			background: url('http://img.cpgm.cc/panda/static/public/btn3.png');
			background-size: 100% 100%;
			margin-top: 30px;
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				color: #B73800;
				font-size: 18px;
				font-weight: 600;
			}
			p {
				display: flex;
				align-items: center;
				color: #B73800;
				font-size: 14px;
				font-weight: 600;
				margin-top: 4px;

				image {
					width: 20px;
					margin-right: 4px;
				}
			}
		}

	}
	.closed {
		position: absolute;
		width: 25px;
		top: 8%;
		right: 15px;
	}
}

.playboxac {
	bottom:0 !important;
}



.numbox {
	width: 100%;
	background: #FFFFFF;
	border-radius: 6px;
	padding: 15px;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	text {
		color: #1D1E24;
		font-size: 14px;
		font-weight: 600;
		margin-right: 20px;
	}

	.flex1 {
		flex: 1;
	}
	
}

.have {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	margin-top: 10px;
	color: #000000;

	image {
		width: 20px;
	}
}

.have2 {
	font-size: 14px;
}


/deep/ .u-numberbox {
	width: 100%;
}
/deep/ .u-number-input {
	flex: 1 !important;
	background: transparent !important;
 }

 /deep/ .u-icon-minus {
	width: 30px;
	height: 30px !important;
	background: #FFFFFF !important;
	border-radius: 4px;
	border: 1px solid #979797;
 }

  /deep/ .u-icon-plus {
	width: 30px;
	height: 30px !important;
	background: #FFFFFF !important;
	border-radius: 4px;
	border: 1px solid #979797;
 }

.posaword {
	position: absolute;
	top: 13%;
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 16px;
	z-index: 10;
}



// 弹窗s
.mask_explain {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 45px 0px rgba(255,255,255,0.5), inset -5px -5px 45px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 20px;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;

	h3 {
		width: 60%;
		text-align: center;
		color: #000000;
		font-size: 18px;
		font-weight: 600;
		position: relative;
		z-index: 2;
	}

	h3::after {
		content: '';
		width: 100%;
		height: 30px;
		background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.e_content {
		background: #FFFFFF;
		border-radius: 9px;
		padding: 10px;
		border-radius: 7px;
		font-size: 12px;
		color: rgba(0, 0, 0, 0.8);
		margin-top: 20px;
		p {
			margin: 5px 0;
		}
	}
}

.e_closed {
	position: absolute;
	bottom: -20%;
	left: 50%;
	transform: translateX(-50%);
	width: 25px;
}

.wa {
	position: absolute;
	bottom: 21%;
	width: 70px;
	right: 10px;
	z-index: 999;
}




// 弹窗

.maskbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	min-height: 300px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.topimg {
		width: 45%;
		margin: 0 auto;
		margin-top: -25%;
	}

	h3 {
		color: #000000;
		font-size: 26px;
	}

	.wightbg {
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 9px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15px;

		p {
			width: 100%;
			position: relative;
			color: #000000;
			font-size: 16px;
			font-weight: 600;
			z-index: 2;
			padding: 0 10px;
			text-align: center;
		}

		p::after {
			content: '';
			width: 70%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 80% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 15%;
			z-index: -1;
		}

		image {
			width: 30%;
			margin: 10px 0;
		}
		text {
			color: #000000;
			font-size: 20px;
			font-weight: 600;
		}
	}
}

.mask_btn {
	width: 50%;
	height: 58px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: 30px;
	color: #B73800;
	font-weight: 600;
	font-size: 18px;
}

.cancel {
	color: rgba(0, 0, 0, 0.7);
	font-size: 14px;
	text-align: center;
	margin-top: 20px;
}




// 弹窗

.maskbox2 {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	min-height: 300px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.topimg {
		width: 35%;
		margin: 0 auto;
		margin-top: -25%;
	}

	h3 {
		color: #000000;
		font-size: 26px;
	}

	.wightbg {
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 9px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15px;

		p {
			position: relative;
			color: #000000;
			font-size: 20px;
			font-weight: 600;
			z-index: 2;
			padding: 0 10px;
		}

		p::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		image {
			width: 30%;
			margin: 10px 0;
		}
		text {
			color: #000000;
			font-size: 20px;
			font-weight: 600;
		}
	}
}

.mask_btn {
	width: 50%;
	height: 58px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: 30px;
	color: #B73800;
	font-weight: 600;
	font-size: 18px;
}

.song {
	position: absolute;
	width: 40%;
	top: -8%;
	left: 30%;
}




@keyframes zwyJittery1{
	5%, 50% {
	    transform: scale(1);
	}
	10% {
	    transform: scale(0.9);
	}
	15% {
	    transform: scale(1.15);
	}
	20% {
	    transform: scale(1.15) rotate(-5deg);
	}
	25% {
	    transform: scale(1.15) rotate(5deg);
	}
	30% {
	    transform: scale(1.15) rotate(-3deg);
	}
	35% {
	    transform: scale(1.15) rotate(2deg);
	}
	40% {
	    transform: scale(1.15) rotate(0);
	}
}

.zwyJittery1{
	animation: zwyJittery1 4s infinite;
}


</style>